class Cartlist {
    constructor() {

    }

    init() {
        // alert(1)
        // 1.获取本地存储，转换成对象
        let localObj = {};
        if (localStorage.getItem('localgoods')) { //如果本地存储存在，获取
            localObj = JSON.parse(localStorage.getItem('localgoods')); //字符串格式的对象转换成对象
        } else { //如果本地存储不存在
            localObj = {}; //放置购物车列表页面删除，详情页不刷新的情况继续添加商品
        }
        // console.log(localObj);


        // 2.遍历存放本地存储的对象
        $.ajax({
            url: 'http://localhost/lining/backend/alldata.php',
            dataType: 'json'
        }).then(function(resData) {
            $.each(localObj, function(sid, num) {
                // console.log(value);
                $.each(resData, function(index, value) {
                    if (value.sid == sid.substring(8)) {
                        let clonebox = $('.top:hidden').clone(true, true); //克隆盒子
                        clonebox.find('.sp img').attr('src', value.url); //赋值图片
                        clonebox.find('.bt span').html(value.title); //赋值标题
                        clonebox.find('.price').html('￥' + value.price); //单价
                        clonebox.find('.stepper_input').val(num); //输入数量
                        clonebox.find('.pprice').html('￥' + value.price * num)

                        clonebox.attr('sid', sid.substring(8)); //添加自定义属性


                        clonebox.css('display', 'block'); //显示盒子
                        $('.cart-row').append(clonebox); //将clonebox追加给外面的盒子
                        calc(); //统计
                    }
                })
            })
        })

        // 3.封装函数实现统计总价和总的数量
        // 复选框必须选中进行统计

        // goods-item --- top 克隆盒子
        // cart-checkbox --- 蔡同学前边的框
        // b-sum strong --- 总价格
        // item-list --- cart - row
        // cart - checkbox input --- xz input


        function calc() {
            // alert(1);
            let goodsCount = 0; //商品数量的初始值
            let goodsPrice = 0; //商品总价的初始值
            $('.top:visible').each(function() {
                if ($(this).find('.xz input').prop('checked')) {
                    goodsCount += parseInt($(this).find('.stepper_input').val());
                    goodsPrice += parseFloat($(this).find('.pprice').html().substring(1))
                }
            });
            $('.cart-highlight').html(goodsCount)
            $('.pprice-zongjia').html('￥' + goodsPrice)

        }

        // 单选物品，已选商品跟随改变
        $('.top').on('click', '.xz input', function() {
            let len1 = $('.top:visible').find('.xz input').length; //复选框的长度
            let len2 = $('.top:visible').find('.xz input:checked').length; //选中的复选框的长度
            if (len1 === len2) {
                $('.quanxuan').prop('checked', true);
            } else {
                $('.quanxuan').prop('checked', false);
            }
            calc() //统计
        })

        // 4.全选按钮
        $('.quanxuan').on('click', function() {
            $('.top:visible').find('input:checkbox').prop('checked', $(this).prop('checked'))
            $('.quanxuan').prop('checked', $(this).prop('checked'));
            calc() //统计
                // alert($('.top:visible').find('input:checkbox').length)
            $('.cart-row').on('click', '.xz input', function() {
                // alert(1)
                // alert($('.top:visible').find('.xz input').length)
                let len1 = $('.top:visible').find('.xz input').length; //复选框的长度
                let len2 = $('.top:visible').find('.xz input:checked').length; //选中的复选框的长度
                if (len1 === len2) {
                    $('.quanxuan').prop('checked', true);
                } else {
                    $('.quanxuan').prop('checked', false);
                }
                calc(); //统计
            })
        })

        // 5.商品数量的改变
        // ++
        $('.top').on('click', '.jiahao', function() {
                // alert(1)
                let num = $(this).prev().val();
                num++
                $(this).prev().val(num);
                // 调用小计
                $(this).parents('.top').find('.pprice').html(allPrice($(this)))
                    // 写入本地存储
                storageCount($(this).parents('.top').attr('sid'), num);
                calc(); //统计
            })
            // --
        $('.top').on('click', '.jianhao', function() {
                // alert(1)
                let num = $(this).next().val();
                num--;
                if (num < 1) {
                    $(this).next().val(1);
                } else {
                    $(this).next().val(num);
                }
                // 调用小计
                $(this).parents('.top').find('.pprice').html(allPrice($(this)))
                    // 写入本地存储
                storageCount($(this).parents('.goods-item').attr('sid'), $(this).next().val());
                calc(); //统计
            })
            // input
        $('.top').on('input', '.stepper_input', function() {
            // alert(1)
            // 输入框正则
            let reg = /^[1-9]\d*$/;
            if (!reg.test($(this).val())) { //不满足正则
                $(this).val(1);
            }
            // 调用小计
            $(this).parents('.top').find('.pprice').html(allPrice($(this)))
                // 写入本地存储
            storageCount($(this).parents('.goods-item').attr('sid'), $(this).val());
            calc(); //统计
        })

        // 封装函数实现小计
        function allPrice(obj) {
            let count = parseInt(obj.parents('.top').find('.stepper_input').val()); //数量
            let single = parseFloat(obj.parents('.top').find('.price').html().substring(1)); //单价
            return '￥' + (count * single).toFixed(2); //保留2位小数
        }

        // 封装函数实现修改的数量继续写入本地存储。
        function storageCount(sid, num) { //sid:当前商品的sid  num:当前商品的数量
            let localData = {};
            if (localStorage.getItem('localgoods')) {
                localData = JSON.parse(localStorage.getItem('localgoods'));
                //	{"localsid1":"1","localsid2":"2","localsid3":"3","localsid4":"4"}
                localData['localsid' + sid] = num;
                localStorage.setItem('localgoods', JSON.stringify(localData));
            }
        }

        // 6.删除对应的商品以及删除所有的选中的商品
        // 删除本地存储的数据和结构。
        // 6.1.删除单个商品
        $('.top').on('click', '.shanchu  span', function() {
                // alert(1)
                if (window.confirm('你确定要删除吗？')) {
                    $(this).parents('.top').remove();
                    delLocalStorage($(this).parents('.top').attr('sid'))
                    calc(); //统计
                }

            })
            // 6.2.删除选中的商品
        $('.xuanzhong').on('click', function() {
            if (window.confirm('你确定要删除吗？')) {
                $('.top:visible').each(function(index, element) { //element:表示top
                    if ($(element).find('.xz input').prop('checked')) {
                        $(element).remove();
                        delLocalStorage($(element).attr('sid'))
                        calc(); //统计
                    }
                })
            }


        })

        // 封装函数实现删除本地存储
        // 取出对应的本地存储，删除后，设置回去
        function delLocalStorage(sid) {
            let localData = {};
            if (localStorage.getItem('localgoods')) {
                localData = JSON.parse(localStorage.getItem('localgoods')); //获取
                delete localData['localsid' + sid] //删除
                localStorage.setItem('localgoods', JSON.stringify(localData)); //设置回去
            }
        }
    }
}



export {
    Cartlist
}